<template>
	<view class="list-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="会议日程"></uni-navbar></view>

		<view class="info-box" v-if="id">
			<view class="info-title">
				{{ name }}
				<text class="dept">{{ dept }}</text>
			</view>
		</view>

		<view class="container">
			<u-time-line class="sched-box">
				<u-time-line-item v-for="(item, index) in scheduleList" :key="item.id" nodeTop="12">
					<template v-slot:node>
						<view class="u-node" style="background: #ce1617" v-if="index == 0"><u-icon name="checkmark-circle" color="#fff" :size="32"></u-icon></view>
						<view class="u-node" style="background: #fff" v-else><u-icon name="more-circle" color="#ccc" :size="32"></u-icon></view>
					</template>
					<template v-slot:content>
						<view class="sched-content">
							<view class="sched-title">{{ item.title }}</view>
							<view class="sched-desc">地点： {{ item.meetingAddress }}</view>
							<view class="sched-time" style="color: #fff; background-color: #ce1617; font-size: 16px" v-if="index == 0">{{ item.startTime }}</view>
							<view class="sched-time" style="color: #808080; background-color: #fff; font-size: 16px" v-else>{{ item.startTime }}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			id: '',
			dept: '',
			name: '',
			hyhdMeeting: {},
			scheduleList: []
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.name = decodeURI(option.name);
		this.dept = decodeURI(option.dept);
		this.loadData();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadData() {
			let data = {
				pageNum: 1,
				pageSize: 99999,
				curUserID: this.userInfo.sysUser.id,
				hyhdMeeting: {
					clientCode: this.userInfo.sysUser.clientCode,
					parentId: this.id,
					remark1: 'richeng'
				}
			};
			this.$request('/huiyihuodong/hyhd-meeting/list', data).then((res) => {
				this.scheduleList = res.data.records.reverse();
			});
		}
	}
};
</script>

<style lang="scss">
.info-box {
	padding: 30rpx 30rpx;

	.info-title {
		margin-bottom: 14rpx;
	}
}

.container {
	padding-left: 50rpx;
}

.sched-box {
	.sched-title {
		font-size: 17px;
		color: #000;
	}

	.sched-desc {
		margin-top: 16rpx;
		font-size: 16px;
		color: #808080;
	}

	.sched-time {
		position: absolute;
		left: -70rpx;
		top: -80rpx;
		padding: 10rpx 20rpx 10rpx 60rpx;
		color: #ccc;
		border-radius: 40rpx;
		background-color: #fff;
	}

	.sched-content {
		position: relative;
		margin-top: 80rpx;
		padding: 20rpx 30rpx;
		border-radius: 30rpx;
		background-color: #fff;
	}
}
</style>
